<template>
  <div class="fullMain" style="max-height: calc(100% - 50px);overflow: scroll;">
    <x-header :left-options="{backText: '',showBack: false}">
      待办事项进度查看
    </x-header>
    <div style="height:20px"/>
    <!-- 插入底部导航栏 -->
    <NavigationOfReport :flagOfItem.sync = "flagOfItem"></NavigationOfReport>

    <div class="mainbBg">
      <div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>
        <span class="ids">
          姓名：{{ userInfo.detail.name}}
        </span>
        </div>
        <div class="report2Btn" v-for="(item,index) in list" :key="index">
            <button type="button" class="affirmBtn specialBtn mB bgBtn" @click="backlogDetailFun(item.tagid,item.num,item.tag)" style="background:#1abc9c;">
            <span style="color:white">{{item.tag}}</span>
            <span style="border:1px gray solid;background:gray;border-radius: 50%;color:white;width：50px;position:absolute;right:20%;" v-if="item.num!==0">&nbsp;{{item.num}}&nbsp;</span>
            </button>

        </div>
      </div>
 </div>
</template>



<script>
  import { XHeader } from 'vux'
  import {mapState} from 'Vuex'
  import report from 'api/report'
  import NavigationOfReport from 'components/Navigation/NavigationOfReport.vue'

  export default {
    name: "T-summary",
    data(){
      return{
        readonly: false,
        selVal:"",
        title_start:"起始：",
        title_end:"截止：",
        placeholder_start:"选择日期",
        placeholder_end:"选择日期",
        list:[],
        alertText: "", // 验证提示框的文本
        isShowAlert: false, // 是否显示验证提示,
        flagOfItem:'toDo'
      }
    },
    computed:{
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    components:{
      XHeader,
      NavigationOfReport
    },
    mounted(){
      this.getData()
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      showAlert(alertText){
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip(){
        this.isShowAlert = false
        this.alertText = ''
      },
      backlogDetailFun(tagid,num,tag){
        this.$router.push({name: 'T_backlog_timeLine',params:{tagid:tagid,count:num,tag:tag}});
      },
      async getData(){
        const result = await report.getReportProgress()
        if(result.code===0){
          this.showAlert(result.message)
        }else{
          
          this.list = result.data
        }
      }
    }
  }
</script>